<!--
* @description 龙界2.0信息汇总
* @fileName longjie.vue
* @author huangyu
* @date 2022/06/28 09:36:25
!-->
<template>
    <div class="longjieContent">
        <el-button @click="clickVer" v-if="isPower">添加内容</el-button>
        <div style="padding: 20px;">
            <el-row>
                <el-col :span="12" v-for="(item,index) in list" :key="index" style="margin-bottom: 20px;">
                    <el-button type="primary" plain @click="clickDetail(item)">{{item.title}}</el-button>
                    <i class="el-icon-edit-outline" @click="clickEditVer(item)" v-if="isPower"></i>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="dialogVerDetail" append-to-body top="50px">
            <div class="verDetail">
                <h1>{{model.title}}</h1>
                <div class="time">创建时间：{{model.createTime | formatDate}}</div>
                <div v-html="model.content" class="content">{{model.content}}</div>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVer" append-to-body width="1280px" top="50px">
            <el-form label-width="100px">
                <el-form-item label="攻略标题：">
                    <el-input v-model="form.title" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="攻略内容：">
                    <wangEditor  v-model="form.content" :isClear="false"></wangEditor>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submitVer">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <!-- <div>
        《精锐万夫长》装备属性：https://tieba.baidu.com/p/7812080599?see_lz=1
        《大小乌》装备属性：https://tieba.baidu.com/p/7878076431?see_lz=1
        《备战2.0》：https://tieba.baidu.com/p/7893523455?see_lz=1
        《55级版本的部分介绍和需要准备的物资》：https://tieba.baidu.com/p/7898195818?see_lz=1
        《2.0刻印武器成本展示》：https://tieba.baidu.com/p/7870855247?see_lz=1
        《2.0冲名人，以及现在需要准备的刻印武器材料》：https://tieba.baidu.com/p/7865913708?see_lz=1
        《2.0天族龙界地区新采集物方位》：http://aion.178.com/201101/89927210880.html
        《2.0魔族龙界地区新采集物方位》：http://aion.178.com/201006/70248699234.html
        《采集大全》：http://aion.178.com/list/54430992336.html
    </div> -->
</template>

<script>
import { get } from '@/common/app.js'
import { formatDate } from '@/common/unit.js'
import wangEditor from "@/components/system/wangEditor.vue"
export default {
    components: {wangEditor},
    data() {
        return {
            list: [],
            menuHeight: document.documentElement.clientHeight - 140,

            dialogVer: false,
            dialogVerDetail: false,
            model: {},

            form: {
                title: "",
                content: "",
            },
            isPower:  localStorage.power,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        clickDetail(item){
            this.model = item
            this.dialogVerDetail = true
        },
        clickEditVer(row){
            this.form = row
            this.dialogVer = true
        },
        clickVer(){
            this.form = {}
            this.dialogVer = true
        },
        submitVer(){
            if(this.form.title){
                let params = {
                    type: 'getAionVer',
                    data: {
                        type: 'addVER',
                        form: this.form,
                    },
                }
                // console.log(params)
                get('game',params).then(res=>{
                    if(res){
                        if(res){
                            this.$message.success("保存成功！")
                            this.getData()
                            this.dialogVer = false
                        }
                    }
                })
            }else{
                this.$message.error("请填写标题！")
            }
        },
        getData(){
            let params = {
                type: 'getAionVer',
                data: {
                    type: 'getVER',
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.data.reverse()
                }
            })
        },
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            let res = formatDate(date, "yyyy-MM-dd hh:mm:ss");
            return res;
        },
    }
}
</script>

<style lang="less">
.longjieContent{
.verDetail {
    margin-top: -40px;
    h1{text-align: center;}
    .time{text-align: center;color:#999}
    .content{
        img {
            max-width: 100%;
        }
    }
}
}
</style>